<template>
	<view>
		<van-form ref="form" :model="form" >
			<div class="now-payment">
			  <ul class="now-list">
				<li class="left">
				  <h2>现在支付</h2>
				  <p>价格详情</p>
				</li>
				<li class="right">￥{{pricea}}</li>
			  </ul>
			</div>
			<div class="border"></div>
			
			
			<div class="checkbox">
			  <ul>
				<li class="zhifu">
				  <!-- <img class="imgaa" src="../../assets/zhifu.png"> -->
				</li>
				<li>
				  <span class="dd">订单支付</span>
				  <span class="tgz">(平台资金托管 保护双方权益)</span>
				</li>
				<!--<li class="box">-->
				  <!--<van-checkbox v-model="order"></van-checkbox>-->
				<!--</li>-->
			  </ul>
			</div>
			
			<div class="tg" align="left">
			大额交易用户须通过手机银行或
			银行柜台转账至以下账户
		  </div>
		  
		  <div class="tg" align="left">
			账户：河北当途网络科技有限公司<br/>
			账号：0402021609300377978<br/>
			开户行：中国工商银行股份有限公司石家庄高新支行<br/>
		  </div>
		  
		  
		   <div class="border"></div>
		      <div class="upload">
		        <p
		          class="first"
		          style="margin-bottom:12px;"
		        >上传打款凭证</p>
		        <ul class="list">
		          <li class="left">
		            <p class="time-p">第一期支付</p>
		            <div class="ipt">
		              <label for="first">￥</label>
		              <input
		                type="text"
		                id="first"
		                v-model.number="firstPayment"
		              >
		              <p class="uploader-p">
		                <van-uploader
		                  upload-text="上传凭证"
		                  v-model="firstList"
		                  :deletable="false"
		                  :max-count="1"
		                  :after-read="firstRead"
		                />
		              </p>
		            </div>
		          </li>
		          <li class="right">
		            <p class="time-p">第二期支付</p>
		            <div class="ipt">
		              <label for="last">￥</label>
		              <input
		                type="text"
		                id="last"
		                v-model.number="lastPayment"
		              >
		              <p class="uploader-p">
		                <van-uploader
		                  upload-text="上传凭证"
		                  v-model="lastList"
		                  :deletable="false"
		                  :max-count="1"
		                  :after-read="lastRead"
		                />
		              </p>
		            </div>
		          </li>
		        </ul>
		        <p class="last">注：用户转款到平台，平台负责资金托管，保障用户及施工方资金安全，由用户按合同约定金额分期向施工方拨付款项。</p>
		      </div>
			  
			   <div class="password">
			  
					<p class="ht">用户按合同约定金额和期数向施工方拨付款项</p>
					<p class="je">
						<span>订单金额共</span>
			          <input
			            type="text"
			            v-model.number="firstMoney"
			          >
			          <span>元，剩余</span>
			          <input
			            type="text"
			            v-model.number="lastMoney"
			          >
			          <span>元待拨付。</span>
			        </p>
					
					
					 <ul class="list">
					        <li style="margin-left: 18px">
					          <p class="title">第一次拨款</p>
					          <div class="ipt">
					            <label for="last">￥</label>
					            <input
					              :readonly="zhiduertou"
					              type="text"
					              id="last"
					              v-model.number="oneMoney"
					              :disabled="disBool"
					              ref="ipt-one"
					            >
					          </div>
					        </li>
					        <li class="public">
					          <p class="title">第二次拨款</p>
					          <div class="ipt">
					            <label for="last">￥</label>
					            <input
					              :readonly="zhiduyi"
					              type="text"
					              id="last"
					              v-model.number="twoMoney"
					              :disabled="disBool"
					              ref="ipt-two"
					            >
					          </div>
					        </li>
					        <li class="public">
					          <p class="title">第三次拨款</p>
					          <div class="ipt">
					            <label for="last">￥</label>
					            <input
					              :readonly="zhiduer"
					              type="text"
					              id="last"
					              v-model.number="threeMoney"
					              :disabled="disBool"
					              ref="ipt-three"
					            >
					
					          </div>
					        </li>
					        <li class="public">
					          <p class="title">第四次拨款</p>
					          <div class="ipt">
					            <label for="last">￥</label>
					            <input
					              :readonly="zhidusan"
					              type="text"
					              id="last"
					              v-model.number="fourMoney"
					              :disabled="disBool"
					              ref="ipt-four"
					            >
					          </div>
					        </li>
					        <li class="public">
					          <p class="title">第五次拨款</p>
					          <div class="ipt">
					            <label for="last">￥</label>
					            <input
					              :readonly="zhidusi"
					              type="text"
					              id="last"
					              v-model.number="fiveMoney"
					              :disabled="disBool"
					              ref="ipt-five"
					            >
					          </div>
					        </li>
					      </ul>
			  <div class="enter">
			          <span class="title">请输入支付密码</span>
			          <van-password-input
			            :value="checked"
			            :focused="showKeyboard"
			            @focus="showKeyboard = true"
			          />
			          <span
			            class="enterBtn"
			            v-show="btnBool"
			            @click="enterFun"
			          >确定</span>
			  
			          <!-- 数字键盘 -->
			          <van-number-keyboard
			            v-model="checked"
			            :show="showKeyboard"
			            @blur="showKeyboard = false"
			          />
			        </div>
			 </div>
			 
			 
			  <p class="p-row">
			 
			         <van-row>
			           <van-col span="2">
			             <van-checkbox v-model="checkeder"></van-checkbox>
			           </van-col>
			           <van-col span="22">
			             <span>我同意平台</span>
			             <span class="my-span">服务协议、取消政策</span>
			             <span>和</span>
			             <span class="my-span">退款政策,</span>
			             <span>我也同意支付以上所示订单金额。</span>
			           </van-col>
			 
			         </van-row>
			       </p>
			     <div
			       class="border"
			       style="margin-top:8.5rem;"
			     ></div>

			 <van-goods-action>
			   <van-goods-action-icon color="#be99ff" type="warning" style="width: 4rem" icon="phone-o" text="如有疑问请联系客服" @click="onClickIcon" />
			   <van-goods-action-button
				 type="danger"
				 text="确认支付"
				 @click="onClickButton"
				 :disabled="disabled"
			   />
			   <!--v-show="onannui"-->
			 </van-goods-action>
			 
			     <van-popup
			       v-model="show"
			       style="width: 13rem;height: 2rem;padding-top: 0.4rem;background-color: white;opacity:0.6;border-radius: 20px"
			     >符合订单，请您支付即可</van-popup>
			     </van-form>
			 
			     <van-popup
			       v-model="showTwo"
			       style="width: 13rem;height: 2rem;padding-top: 0.4rem;background-color: white;opacity:0.6;border-radius: 20px"
			     >已超出金额</van-popup>
			 
			 
			 
		</van-form>
	</view>
</template>

<script>

export default {
	data() {
		return {
			checkeder: true,
		  disabled: true,
		  // form:{},
		  pricea:'',
		  instaList:[],
		  zhiduertou: false,
		  zhiduyi: true,
		  zhiduer: true,
		  zhidusan: true,
		  zhidusi: true,
		  onannui: false,
		  btnBool: true, // 是否显示确定按钮
		  show: false, // 是否显示弹出层
		  showTwo: false, // 是否显示弹出层
		  disBool: false, // 表单是否禁读
		  firstPayment: 0, // 第一期支付
		  lastPayment: 0, // 第二期支付
		  firstList: [], // 第一期上传凭证
		  lastList: [], // 第二期上传凭证
		  order: false,
		  // firstMoney: 0, // 定金总金额
		  // lastMoney: 0, // 剩余金额
		  form:{
			numoneMoney:'',
			numtwoMoney:'',
			numthreeMoney:'',
			numfourMoney:'',
			numfiveMoney:'',
	
			// numfirstList:[],
			numfirstPayment:'',
			numlastPayment:'',
			numlastList:'',
			numtState:'',
		  },
	
		  oneMoney: 0, // 第一次拨款
		  twoMoney: 0, // 第二次拨款
		  threeMoney: 0, // 第三次拨款
		  fourMoney: 0, // 第四次拨款
		  fiveMoney: 0, // 第五次拨款
		  checked: '',
		  showKeyboard: true,
		  listpaas:Array,
		  zhi:'',
		}
	},
	
	
	computed: {
	    firstMoney () {
	      // if((this.firstPayment + this.lastPayment) < this.pricea){
	      //   Toast('第一起付款和第二期付款要等于金额');
	      //   return 0;
	      // }
	      return this.firstPayment + this.lastPayment
	    },
	    lastMoney () {
	      let bool = this.firstMoney - (this.oneMoney + this.twoMoney + this.threeMoney + this.fourMoney + this.fiveMoney)
	      if (bool < -0 ){
	        this.showTwo = true;
	        return bool;
	      }
	      if (bool === 0 && this.firstMoney > 0) {
	        this.show = true
	        this.disabled = false
	        this.form.numoneMoney = this.oneMoney
	        this.form.numtwoMoney = this.twoMoney
	        this.form.numthreeMoney = this.threeMoney
	        this.form.numfourMoney = this.fourMoney
	        this.form.numfiveMoney = this.fiveMoney
	        instalmentedit(this.form).then(res=>{
	          return 0;
	      })
	        this.disBool = true
	        this.btnBool = false
	        this.onannui = true
	      }
	      if (bool === 0 && this.firstMoney !== 0 && this.twoMoney !== 0 && this.threeMoney !== 0 && this.fourMoney !== 0 && this.fiveMoney !== 0) {
	        this.btnBool = false
	      }
	      return this.firstMoney - (this.oneMoney + this.twoMoney + this.threeMoney + this.fourMoney + this.fiveMoney)
	    }
	
	
	  },
	
	    created(){
	      const constructionId = this.$route.query && this.$route.query.constructionId;
	      this.pricea = this.$route.query && this.$route.query.pricenum;
	      this.form.numtState = this.$route.query && this.$route.query.numinstalmentState;
	
	
	      this.getListPass();
	      this.getinstalmentList();
	    },
	
	  methods: {
	    getinstalmentList(){
	      instalmentList().then(res=>{
	        this.instaList = res.rows;
	      })
	    },
	
	    getListPass(){
	      findAllList().then(res=>{
	        this.zhi = res.data[0].passwordcode;
	        console.log("********this.zhi******"+this.zhi)
	      })
	    },
	
	    // 第一期上传图片读取完 回调函数
	    firstRead () {
	      console.log('第一期支付上传');
	    },
	    // 第二期上传图片读取完 回调函数
	    lastRead () {
	      console.log('第二期支付上传');
	    },
	    // 确定按钮执行函数
	    enterFun () {
	
	      let bool = this.firstMoney - (this.oneMoney + this.twoMoney + this.threeMoney + this.fourMoney + this.fiveMoney)
	      // 判断支付密码
	      if (this.checked === this.zhi) {
	        if (this.oneMoney > 0 && bool !== 0 && this.twoMoney === 0) {
	          this.$refs['ipt-two'].focus()
	          this.form.numoneMoney = this.oneMoney
	          this.form.numfirstPayment = this.firstPayment
	          instalmentedit(this.form).then(res=>{
	            return 0;
	          })
	          this.zhiduyi = false;
	          this.zhiduertou = true;
	          this.checked = '';
	        } else if (this.twoMoney > 0 && bool !== 0 && this.threeMoney === 0) {
	          this.$refs['ipt-three'].focus()
	          this.form.numtwoMoney = this.twoMoney
	           this.form.numlastPayment = this.lastPayment
	          instalmentedit(this.form).then(res=>{
	            return 0;
	          })
	          this.zhiduer = false;
	          this.zhiduyi = true;
	          this.checked = '';
	        } else if (this.threeMoney > 0 && bool !== 0 && this.fourMoney === 0) {
	          this.$refs['ipt-four'].focus()
	          this.form.numthreeMoney = this.threeMoney
	          instalmentedit(this.form).then(res=>{
	            return 0;
	          })
	          this.zhidusan = false;
	          this.zhiduer = true;
	          this.checked = '';
	        } else if (this.fourMoney > 0 && bool !== 0 && this.fiveMoney === 0) {
	          this.$refs['ipt-five'].focus()
	          this.form.numfourMoney = this.fourMoney
	          instalmentedit(this.form).then(res=>{
	            return 0;
	          })
	          this.zhidusi = false;
	          this.zhidusan = true;
	          this.checked = '';
	        }
	      } else {
	        Toast.fail('密码错误');
	        this.checked = '';
	      }
	    },
	    // 底部支付按钮执行函数
	    // handleEnter () {
	    //   console.log('支付');
	    // }
	
	    onClickButton(){
	      updateTai(this.form).then(res=>{
	        Toast.success('支付成功')
	      this.$router.push({
	        path:"/"
	      });
	      })
	    },
	    onClickIcon(){
	
	    }
	}
	
}
</script>
<style>
	
	.footer .left-p {
	  font-size: 12px;
	}
	
	.imgaa{
	  width:1.5rem; height:1.5rem
	}
	
	.footer img {
	  width: 24px;
	  height: 24px;
	  margin: 0 auto;
	}
	
	.footer li {
	  text-align: center;
	  font-family: Arial;
	}
	
	.footer span {
	  font-family: Arial;
	}
	
	.footer .btn {
	  display: block;
	  width: 250px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 4px;
	  background-color: rgba(195, 155, 115, 100);
	  color: rgba(255, 255, 255, 100);
	  font-size: 14px;
	  text-align: center;
	  font-family: Arial;
	  margin-left: 20px;
	}
	
	.footer {
	  width: 100%;
	  height: 77px;
	  line-height: 20px;
	  color: rgba(16, 16, 16, 100);
	  font-size: 14px;
	  text-align: center;
	  font-family: Arial;
	  border: 1px solid rgba(255, 255, 255, 100);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  box-sizing: border-box;
	}
	
	.p-row .my-span {
	  color: #5290ff;
	}
	
	.p-row span {
	  color: rgba(16, 16, 16, 100);
	  font-size: 16px;
	  font-family: PingFangSC-regular;
	  margin-top: 10px;
	}
	
	.p-row {
	  width: 85%;
	  margin: 10px auto;
	  text-align: left;
	}
	
	.password {
	  border-bottom: 2px solid #eee;
	  padding-bottom: 20px;
	}
	
	.enter .enterBtn {
	  display: block;
	  width: 58px;
	  height: 28px;
	  line-height: 20px;
	  border-radius: 25px;
	  background-color: #c39b73;
	  color: #ffffff;
	  font-size: 14px;
	  text-align: center;
	  font-family: Arial;
	  border: 1px solid rgba(255, 255, 255, 100);
	  text-align: center;
	  line-height: 28px;
	}
	
	.enter {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-top: 20px;
	}
	
	.enter .title {
	  color: rgba(113, 112, 112, 100);
	  font-size: 14px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	  margin-left: 13px;
	}
	
	.enter >>> .van-password-input__security {
	  width: 144px;
	  height: 24px;
	}
	
	.password .public {
	  margin-left: 5px;
	}
	
	.password .title {
	  color: rgba(16, 16, 16, 100);
	  font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	}
	
	.password .ipt input {
	  width: 60px;
	}
	
	.password .list {
	  display: flex;
	  justify-content: center;
	  margin-top: 14px;
	}
	
	.je {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-top: 10px;
	  margin-left: 19px;
	}
	
	.je input {
	  border: 1px solid #c39b73;
	  width: 50px;
	  height: 18px;
	  padding-left: 5px;
	  margin-left: 5px;
	  margin-right: 5px;
	  font-size: 13px;
	}
	
	.je span {
	  color: rgba(16, 16, 16, 100);
	  font-size: 14px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	}
	
	.ht {
	  color: rgba(16, 16, 16, 100);
	  font-size: 14px;
	  font-family: PingFangSC-bold;
	  font-weight: bold;
	  margin-top: 9px;
	  margin-left: -30px;
	}
	
	.upload .first {
	  margin-left: 9px;
	  color: rgba(16, 16, 16, 100);
	  font-size: 14px;
	  text-align: left;
	  font-family: SourceHanSansSC-regular;
	}
	
	.time-p {
	  color: rgba(16, 16, 16, 100);
	  font-size: 14px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	  margin-left: 10px;
	}
	
	.ipt >>> .van-uploader__upload {
	  background-color: transparent;
	  border: 1px dashed #bbbbbb;
	}
	
	.uploader-p {
	  margin-top: 10px;
	  margin-left: 10px;
	}
	
	.ipt label {
	  color: rgba(16, 16, 16, 100);
	  font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	}
	
	.ipt input {
	  padding-left: 15px;
	  box-sizing: border-box;
	  width: 78px;
	  background-color: transparent;
	  height: 25px;
	  border: 0;
	  margin-left: -15px;
	  border-bottom: 1px solid #bbbbbb;
	  font-size: 12px;
	}
	
	.upload ul {
	  display: flex;
	}
	
	.upload .first {
	  color: rgba(16, 16, 16, 100);
	  font-size: 14px;
	  text-align: left;
	  font-family: SourceHanSansSC-regular;
	}
	
	.upload .last {
	  color: rgba(255, 0, 0, 100);
	  font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	  margin-left: 10px;
	}
	
	.upload {
	  width: 100%;
	  height: 242px;
	  padding-left: 22px;
	  padding-right: 27px;
	}
	
	.box {
	  text-align: right;
	  margin-left: 10px;
	}
	
	.tgz{
	  color: rgba(255, 0, 0, 100);
	  font-size: 12px;
	  text-align: left;
	}
	
	.tg {
	  color: rgba(255, 0, 0, 100);
	  font-size: 12px;
	  text-align: left;
	  font-family: PingFangSC-regular;
	  padding: 0rem 2rem 0rem 2rem;
	}
	
	.dd {
	  color: rgba(16, 16, 16, 100);
	  font-size: 19px;
	  text-align: left;
	  font-family: SourceHanSansSC-regular;
	  /*margin: 10px 10px 10px 10px;*/
	  /*padding: 0rem 10rem 0rem 0rem;*/
	}
	
	.zhifu {
	  width: 32px;
	  height: 32px;
	}
	
	.checkbox ul {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.checkbox {
	  width: 100%;
	  height: 54px;
	  padding-left: 31px;
	  padding-right: 31px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	div {
	  box-sizing: border-box;
	}
	
	.PaymentDetails {
	  height: 100vh;
	}
	
	.prev-btn {
	  height: 44px;
	  overflow: hidden;
	}
	
	.demo-nav__back {
	  position: absolute;
	  top: 16px;
	  left: 16px;
	  width: 24px;
	  height: 24px;
	  cursor: pointer;
	}
	
	.now-payment {
	  width: 100%;
	  height: 92px;
	  /* background-color: skyblue; */
	  /*margin-top: 24px;*/
	}
	
	.now-list {
	  display: flex;
	}
	
	.now-list li {
	  flex: 1;
	  height: 92px;
	  /* background-color: pink; */
	}
	
	.now-list .left {
	  /* background-color: tomato; */
	  padding-top: 25px;
	  padding-left: 33px;
	  box-sizing: border-box;
	}
	
	.now-list .right {
	  float: right;
	  line-height: 92px;
	  color: rgba(149, 4, 4, 100);
	  font-size: 18px;
	  text-align: right;
	  font-family: SourceHanSansSC-regular;
	  box-sizing: border-box;
	  padding-right: 33px;
	}
	
	.now-list h2 {
	  color: rgba(16, 16, 16, 100);
	  font-size: 18px;
	  text-align: left;
	  font-family: SourceHanSansSC-regular;
	  /* text-align: center; */
	}
	
	.now-list p {
	  color: rgba(115, 116, 117, 100);
	  font-size: 14px;
	  text-align: left;
	  font-family: SourceHanSansSC-regular;
	  /* text-align: center; */
	}
	
	.border {
	  width: 305px;
	  height: 0px;
	  margin: 0 auto;
	  border-bottom: 1px solid rgba(240, 240, 240, 100);
	}
	
	
</style>
